<template>
  <div class="shareDetail">
    <div class="top">
      <van-nav-bar title="面经详情">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back iconStyle"
            @click="$router.push('/shareList')"
          ></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="title">
      <van-cell>
        <div class="titleTxt">{{ detailData.title }}</div>
        <div class="user" v-if="detailData.author">
          <img :src="detailData.author.avatar" alt="" />
          <div class="userinfo">
            <div class="nickname">{{ detailData.author.nickname }}</div>
            <span>{{ detailData.created_at | timeformat }}</span>
          </div>
        </div>
      </van-cell>
    </div>
    <div class="content">
      <van-cell>
        <div class="main" v-html="detailData.content"></div>
      </van-cell>
    </div>

    <div class="comment">
      <van-cell>
        <div class="header">
          评论<sup>{{ total }}</sup>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="commentBox"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <div class="user">
              <img
                :src="'http://localhost:1337' + item.author.avatar"
                alt=""
                @click="reply(item)"
              />
              <div class="userinfo">
                <div class="nickname">{{ item.author.nickname }}</div>
                <span>{{ item.created_at | timeformat }}</span>
              </div>
              <div class="star">
                <span>{{ item.star }}</span>
                <van-icon name="good-job-o" />
              </div>
            </div>
            <div class="text" @click="reply(item)">{{ item.content }}</div>
            <div
              class="reply"
              v-for="(subitem, subindex) in item.children_comments"
              :key="subindex"
            >
              <span class="name">{{ subitem.author }}：</span>
              <span>{{ subitem.content }}</span>
            </div>
          </div>
        </van-list>
      </van-cell>
    </div>
    <van-cell>
      <div class="addComment">
        <div class="addContent" @click="subComment">
          <div class="innertxt">我来补充两句</div>
        </div>
        <div class="addstar" @click="iscollect">
          <van-icon v-if="isCollect" name="star-o" size="20px" color="red" />
          <van-icon v-else name="star-o" size="20px" /><span>{{
            detailData.collect
          }}</span>
        </div>
        <div class="addzan" @click="addStar">
          <van-icon v-if="isStar" color="red" name="good-job-o" size="20px" />
          <van-icon v-else name="good-job-o" size="20px" /><span>{{
            detailData.star
          }}</span>
        </div>
        <div class="addshare">
          <van-icon name="share-o" size="20px" /><span>{{
            detailData.share
          }}</span>
        </div>
      </div>
    </van-cell>
    <van-popup v-model="isShow" position="bottom" :style="{ height: '26%' }">
      <div class="add">
        <van-field
          v-model="commentMsg"
          rows="4"
          type="textarea"
          :placeholder="placeholder"
          class="inpStyle"
        />
        <span class="send" @click="submit">发送</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getDetail,
  getComment,
  sendComment,
  getCollect,
  getStar
} from '@/api/find.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    }),
    // 判断用户是否收藏当前文章
    isCollect: function () {
      return (
        this.$store.state.userInfo.collectArticles &&
        this.$store.state.userInfo.collectArticles.includes(+this.id)
      )
    },
    // 判断用户是否点赞当前文章
    isStar: function () {
      return (
        this.$store.state.userInfo.starArticles &&
        this.$store.state.userInfo.starArticles.includes(+this.id)
      )
    }
  },
  watch: {},
  data () {
    return {
      commentMsg: '',
      isShow: false,
      loading: false,
      finished: false,
      id: this.$route.params.id,
      limit: 5,
      start: 0,
      detailData: {},
      total: 0,
      commentList: [],
      share: '',

      star: '',
      placeholder: '我来补充两句',
      isReply: false,
      replyId: 0,
      // 用来接收回复评论的item.comment_children
      children_comments: ''
    }
  },
  created () {
    this.getDetaildData()
  },
  methods: {
    // 收藏
    iscollect () {
      if (this.userInfo) {
        this.$toast.loading({
          message: '请求中...',
          duration: 0
        })
        getCollect({ id: this.id }).then(res => {
          // console.log(res)
          console.log('打印一下信息', this.detailData)
          this.detailData.collect = res.data.data.num
          // 更新当前作者收藏的文章集合
          this.userInfo.collectArticles = res.data.data.list
          if (this.isCollect) {
            this.$toast.success('收藏成功')
          } else {
            this.$toast.success('取消收藏')
          }
        })
      } else {
        this.$toast.fail('请先登录！')
        // 用来 ?_redirect=' + to.fullPath保存退出登录时所处的位置
        // this.$router.push(`/login?_redirect=${this.route.fullPath}`)
        this.$router.push('/login?_redirect=' + this.$route.fullPath)
      }
    },
    // 点赞
    addStar () {
      // 判断用户是否登录
      if (this.userInfo) {
        this.$toast.loading({
          message: '请求中...',
          duration: 0
        })
        getStar({ article: this.id }).then(res => {
          console.log('返回数据', res)
          // 文章的总点赞数
          this.detailData.star = res.data.data.num
          // 更新作者当前文章点赞数集合
          this.userInfo.starArticles = res.data.data.list
          if (this.isStar) {
            this.$toast.success('已点赞')
          } else {
            this.$toast.success('取消点赞')
          }
        })
      } else {
        this.$toast.fail('请先登录！')
        // 用来 ?_redirect=' + to.fullPath保存退出登录时所处的位置
        // this.$router.push(`/login?_redirect=${this.route.fullPath}`)
        this.$router.push('/login?_redirect=' + this.$route.fullPath)
      }
    },
    subComment () {
      this.isShow = true
      this.placeholder = '我来补充两句'
      this.isReply = false
    },
    reply (item) {
      this.isShow = true
      this.placeholder = '回复：' + item.author.nickname
      this.isReply = true
      // console.log('item', item)
      this.replyId = item.id // 回复评论的parent id
      this.children_comments = item.children_comments
    },
    async getDetaildData () {
      // 获取面经文章详情
      this.$toast.loading({
        message: '加载中...',
        duration: 0
      })
      const res = await getDetail(this.id)
      console.log('显示数据', res)
      res.data.data.author.avatar =
        'http://localhost:1337' + res.data.data.author.avatar
      this.detailData = res.data.data
      this.share = res.data.data.share
      this.collect = res.data.data.collect
      this.star = res.data.data.star
      this.$toast.clear()
    },

    async onLoad () {
      const res = await getComment({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      this.total = res.data.data.total
      //   保存数据
      this.commentList.push(...res.data.data.list)
      this.loading = false
      //   修改再次加载开始的下标
      this.start += this.limit
      //   判断当所添加的数组长度大于总数据数量时，加载完成，提示没数据了
      if (this.commentList.length >= res.data.data.total) {
        this.finished = true
      }
    },
    submit () {
      if (this.userInfo) {
        if (this.isReply === false) {
          sendComment({ content: this.commentMsg, article: this.id }).then(
            res => {
              this.commentList.unshift(res.data.data)
              this.commentMsg = ''
              this.isShow = false
              console.log('获取到的', res)
            }
          )
        } else {
          sendComment({ content: this.commentMsg, parent: this.replyId }).then(
            res => {
              console.log(res)
              console.log('获取到的', this.children_comments)
              // this.children_comments.unshift(res.data.data)
              this.children_comments.push(res.data.data)
              this.commentMsg = ''
              this.isShow = false
            }
          )
        }
      } else {
        this.$toast.fail('请先登录！')
        // 用来 ?_redirect=' + to.fullPath保存退出登录时所处的位置
        // this.$router.push(`/login?_redirect=${this.route.fullPath}`)
        this.$router.push('/login?_redirect=' + this.$route.fullPath)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shareDetail {
  font-size: 12px;
  margin-bottom: 85px;
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  .top {
    .iconStyle {
      font-size: 44px;
    }
    /deep/.van-nav-bar__left {
      padding-left: 0;
    }
  }
  .title {
    margin-bottom: 20px;
    .titleTxt {
      font-size: 16px;
      margin-bottom: 15px;
    }
    .user {
      display: flex;

      .userinfo {
        display: flex;
        font-size: 12px;
        flex-direction: column;
        line-height: 16px;
        .nickname {
          font-size: 14px;
          font-weight: 700;
        }
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .content {
    .main {
      img {
        width: 100%;
      }
    }
  }
  .comment {
    .header {
      font-weight: 700;
      margin-bottom: 10px;
      sup {
        font-weight: 400;
        font-size: 12px;
        color: #999;
      }
    }
    .commentBox {
      margin-bottom: 10px;
    }
    .user {
      display: flex;
      line-height: 16px;
      .userinfo {
        flex: 1;
      }
      .nickname {
        font-size: 14px;
        font-weight: 700;
      }

      span {
        font-size: 12px;
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .text {
      margin: 10px 40px 5px;
    }
    .reply {
      background-color: #f7f4f5;
      margin-left: 40px;
      padding: 10px 10px 5px;
    }
  }
  .addComment {
    width: 100%;
    height: 85px;
    display: flex;
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    color: #c1c0c7;

    background-color: #fff;
    .addContent {
      flex: 1;
      height: 36px;
      line-height: 16px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: #f7f4f5;
      padding: 10px;
    }
    .addstar {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      align-items: center;
    }
    .addzan {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      align-items: center;
    }
    .addshare {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 15px;
      align-items: center;
    }
  }
  .add {
    padding: 20px 10px 0;
    text-align: right;
    .inpStyle {
      background-color: #f7f4f5;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    .send {
      font-size: 16px;
      color: #b8b8c1;
    }
  }
}
</style>
